<style>
    #test + .layui-table-view .layui-table-body tbody > tr > td {
        padding: 0;
    }

    #test + .layui-table-view .layui-table-body tbody > tr > td > .layui-table-cell {
        height: 48px;
        line-height: 48px;
    }

    .tb-img-circle {
        width: 100%;
        height: 40px;
        cursor: zoom-in;
    }

    #saveForm .tip {
        color: #FF5722;
    }
</style>
<body>
<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <!-- 表格工具栏 -->
            <form class="layui-form toolbar">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <select name="field_name" lay-verify="required" required>
                            <option value="product_name">产品名称</option>
                        </select>
                    </div>
                    <div class="layui-inline">
                        <input name="field_value" class="layui-input" placeholder="输入搜索内容"/>
                    </div>
                    <div class="layui-inline">
                        <div class="layui-input-inline">
                            <select name="cate_id">
                                <option value="">产品分类</option>
                                {{volist name="cate_list" id="item"}}
                                <option value="{{$item.id}}">{{$item.cate_name}}</option>
                                {{/volist}}
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button class="layui-btn icon-btn" lay-filter="search" lay-submit>
                            <i class="layui-icon">&#xe615;</i>搜索
                        </button>
                    </div>
                </div>
            </form>
            <!-- 数据表格 -->
            <table id="test" lay-filter="test"></table>
        </div>
    </div>
</div>

<!-- 表格操作列 -->
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<!-- 表单弹窗 -->
<script type="text/html" id="saveDialog">
    <form id="saveForm" lay-filter="saveForm" class="layui-form model-form">
        <input type="hidden" name="id">

        <div class="layui-form-item layui-row">
            <div class="layui-inline layui-col-md3">
                <label class="layui-form-label layui-form-required">产品名称</label>
                <div class="layui-input-block">
                    <input name="product_name" placeholder="请输入产品名称" class="layui-input"
                           lay-verType="tips" lay-verify="required" autocomplete="off" required/>
                </div>
            </div>
            <div class="layui-inline layui-col-md3">
                <label class="layui-form-label layui-form-required">英文名称</label>
                <div class="layui-input-block">
                    <input name="product_name_en" placeholder="请输入产品英文名称" class="layui-input"
                           lay-verType="tips" lay-verify="required" autocomplete="off" required/>
                </div>
            </div>
            <div class="layui-inline layui-col-md3">
                <label class="layui-form-label layui-form-required">产品分类</label>
                <div class="layui-input-block">
                    <select name="cate_id" lay-verify="required" required lay-verType="tips">
                        <option value="">选择产品分类</option>
                        {{volist name="cate_list" id="item"}}
                        <option value="{{$item.id}}">{{$item.cate_name}}</option>
                        {{/volist}}
                    </select>
                </div>
            </div>
            <div class="layui-inline layui-col-md3">
                <label class="layui-form-label layui-form-required">售价</label>
                <div class="layui-input-block">
                    <input name="sale" placeholder="请输入售价" class="layui-input"
                           lay-verType="tips" lay-verify="required" autocomplete="off" required/>
                </div>
            </div>
            <div class="layui-inline layui-col-md3">
                <label class="layui-form-label">排序</label>
                <div class="layui-input-block">
                    <input name="sort" placeholder="请输入排序" class="layui-input"
                           lay-verType="tips" autocomplete="off" required/>
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">产品图片</label>
            <div class="layui-input-block" style="display: flex;flex-direction: column">
                <button type="button" class="layui-btn" id="uploadImg" style="width: 150px;">
                    <i class="layui-icon">&#xe67c;</i>上传图片
                </button>
                <input type="hidden" name="img_url" lay-verify="img_url" id="img_url" value=""/>
            </div>
        </div>

        <div id="game">
            <div class="layui-form-item layui-row">
                <label class="layui-form-label layui-form-required">玩法设置</label>
                <div class="layui-inline layui-col-md1">
                    <input name="time[]" placeholder="请输入时间" class="layui-input"
                           lay-verType="tips" lay-verify="required" autocomplete="off" required/>
                </div>
                <div class="layui-inline layui-col-md1">
                    <input name="scale[]" placeholder="请输入盈亏比例" class="layui-input"
                           lay-verType="tips" lay-verify="required" autocomplete="off" required/>
                </div>
                <div class="layui-inline layui-col-md1">
                    <input name="game_price_low[]" placeholder="请输入价格下限" class="layui-input"
                           lay-verType="tips" lay-verify="required" autocomplete="off" required/>
                </div>
                <div class="layui-inline layui-col-md1">
                    <input name="game_price_high[]" placeholder="请输入价格上限" class="layui-input"
                           lay-verType="tips" lay-verify="required" autocomplete="off" required/>
                </div>
                <div class="layui-btn-group">
                    <button type="button" class="layui-btn layui-btn-sm add-game">
                        <i class="layui-icon">&#xe654;</i>
                    </button>
                </div>
            </div>
        </div>

                <div class="layui-form-item layui-row">
                    <div class="layui-inline layui-col-md5">
                        <label class="layui-form-label layui-form-required">时间间隔</label>
                        <div class="layui-input-block">
                            <input name="time" placeholder="请输入时间玩法间隔" class="layui-input"
                                   lay-verType="tips" lay-verify="required" autocomplete="off" required/>
                            <span class="tip">
                                *如时间为：1分、3分、5分、8分，则请用字母逗号将时间分开，如输入：1,3,5,8。
                            </span>
                        </div>
                    </div>
                    <div class="layui-inline layui-col-md5">
                        <label class="layui-form-label layui-form-required">盈亏比例</label>
                        <div class="layui-input-block">
                            <input name="scale" placeholder="请输入盈亏比例" class="layui-input"
                                   lay-verType="tips" lay-verify="required" autocomplete="off" required/>
                            <span class="tip">
                                *如比例为：75%、77%，80%、85%，则请用字母逗号将比例分开，如输入：75,77,80,85。
                            </span>
                        </div>
                    </div>
                </div>
        <div class="layui-form-item">
            <label class="layui-form-label layui-form-required">数据方式</label>
            <div class="layui-input-block">
                <input type="radio" name="type" value="Manual" title="手动设置" checked="checked">
                <input type="radio" name="type" value="OpenExchangeRates" title="openExchangeRates">
                <input type="radio" name="type" value="Huobi" title="火币">
                <input type="radio" name="type" value="Baidu" title="百度">
            </div>
            <span class="tip">
                *手动设置：用自行输入的产品价格，Api：用三方的产品价格,使用第三方则商品价格无法人工修改
            </span>
        </div>

        <div class="layui-form-item layui-row">
            <div class="layui-inline layui-col-md5" style="position: relative">
                <label class="layui-form-label layui-form-required">波动范围</label>
                <div class="layui-input-inline">
                    <input type="text" name="point_low"
                           lay-verType="tips" placeholder="最小波动" lay-verify="required" class="layui-input"
                           autocomplete="off"/>
                </div>
                <div class="layui-form-mid">-</div>
                <div class="layui-input-inline" style="margin-bottom: 10px;">
                    <input type="text" name="point_top"
                           lay-verType="tips" placeholder="最大波动" lay-verify="required" class="layui-input"
                           autocomplete="off"/>
                </div>
                <span class="tip" style="position: absolute;top: 38px;left: 109px;">
                    *客户订单在条件范围内时，会根据订单的涨或跌，自动减或加最小值与最大值之间的随机数，留空或者0则为不开启
                </span>
            </div>
            <div class="layui-inline layui-col-md5">
                <label class="layui-form-label">随机波动范围</label>
                <div class="layui-input-block">
                    <input name="rands" placeholder="请输入随机波动范围" class="layui-input"
                           autocomplete="off" required/>
                    <span class="tip">
                        *产品获取接口值后，会加上+-此处的值。如5，则在接口获取的数据中加上-5~5之间的随机数。
                    </span>
                </div>
            </div>
        </div>

        <div class="layui-form-item text-right">
            <button class="layui-btn" lay-filter="saveSubmit" lay-submit>保存</button>
            <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
        </div>
    </form>
</script>

<!-- js部分 -->
<script type="text/javascript" src="__TPL_RESOURCE_BACKEND__/libs/layui/layui.js"></script>
<script type="text/javascript" src="__TPL_RESOURCE_BACKEND__/js/common.js"></script>
<script>
    layui.use(['layer', 'form', 'table', 'admin', 'upload'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var admin = layui.admin;
        var upload = layui.upload;

        /* 渲染表格 */
        var insTb = table.render({
            elem: '#test',
            url: "{{:url('Product/index')}}",
            page: {
                limit: 20
            },
            method: 'post',
            contentType: 'application/json',
            toolbar: ['<p>',
                '<button lay-event="add" class="layui-btn layui-btn-sm icon-btn"><i class="layui-icon">&#xe654;</i>添加</button>&nbsp;',
                '</p>'].join(''),
            cols: [[
                {field: 'id', title: 'ID', width: 60},
                {
                    title: '图片', templet: function (d) {
                        var url = d.img_url;
                        if (url) {
                            return '<img data-index="' + (d.LAY_INDEX - 1) + '" src="' + url + '" class="tb-img-circle" tb-img alt=""/>';
                        } else {
                            return '';
                        }
                    }, align: 'center', width: 90, unresize: true
                },
                {field: 'product_name', title: '商品名称'},
                {field: 'product_name_en', title: '英文名称'},
                {field: 'cate_name_txt', title: '所属分类', width: 100},
                {field: 'sale', title: '售价'},
                {field: 'rands', title: '随机值'},
                {field: 'point_low', title: '波动最小值'},
                {field: 'point_top', title: '波动最大值'},
                {field: 'type', title: '数据方式', width: 160},
                {
                    title: '数据方式', templet: function (d) {
                        'OpenExchangeRates', 'Huobi', 'Baidu', 'Manual'
                        if (d.type == 'Manual') {
                            return '<span style="color:#5FB878;">手动<span>';
                        } else {
                            return '<span style="color:#FF5722;">' + d.type + '<span>';
                        }
                    }, align: 'center', width: 100, unresize: true
                },
                {field: 'sort', title: '排序', width: 60},
                {title: '操作', toolbar: '#barDemo', align: 'center', width: 110}
            ]]
        });

        /* 表格搜索 */
        form.on('submit(search)', function (data) {
            insTb.reload({where: data.field, page: {curr: 1}});
            return false;
        });

        /* 表格工具条点击事件 */
        table.on('tool(test)', function (obj) {
            if (obj.event === 'edit') { //修改
                showSaveModel(obj.data);
            } else if (obj.event === 'del') { //删除
                doDel(obj);
            }
        });

        /* 表格头工具栏点击事件 */
        table.on('toolbar(test)', function (obj) {
            if (obj.event === 'add') { // 添加
                showSaveModel();
            }
        });

        /* 显示表单弹窗 */
        function showSaveModel(mData) {
            admin.open({
                type: 1,
                title: (mData ? '修改' : '添加') + '产品信息',
                area: ['700px', '600px'],
                resize: true,
                content: $('#saveDialog').html(),
                success: function (layero, dIndex) {
                    // 自动最大化弹窗
                    layer.full(dIndex);
                    // 回显表单数据
                    form.val('saveForm', mData);

                    if (mData && mData.img_url) {
                        $('#uploadImg').after('<img src="' + mData.img_url + '" width="150" height="150">');
                    }

                    var url = mData ? "{{:url('Product/edit')}}" : "{{:url('Product/add')}}";
                    // 表单提交事件
                    form.on('submit(saveSubmit)', function (data) {
                        var loading = layer.load(3);

                        $.ajax({
                            url: url,
                            type: 'post',
                            data: data.field,
                            success: function (res) {
                                if (res.code != 0) {
                                    layer.msg(res.msg, {icon: 5, time: 1000});
                                } else {
                                    layer.close(dIndex);
                                    layer.msg(res.msg, {icon: 1, time: 1500});
                                    insTb.reload();
                                }
                                layer.close(loading);
                            }, error: function () {
                                layer.msg('网络错误请稍后重试', {icon: 5, time: 1000});
                                layer.close(loading);
                            }
                        });
                        return false;
                    });

                    //上传图片
                    upload.render({
                        elem: '#uploadImg'
                        , url: "{{:url('Tool/upload')}}?path=product"
                        , done: function (res) {
                            //上传完毕回调
                            $('#uploadImg').next().next('img').remove();
                            $('#uploadImg').after('<img src="' + res.data + '" width="150" height="150">');
                            $('#img_url').val(res.data);
                        }
                        , error: function () {
                            //请求异常回调
                        }
                    });
                }
            });
        }

        /* 删除 */
        function doDel(obj) {
            layer.confirm('确定要删除选中数据吗？', {
                skin: 'layui-layer-admin',
                shade: .1
            }, function (i) {
                layer.close(i);
                var loading = layer.load(3);
                $.ajax({
                    url: "{{:url('Product/del')}}",
                    type: 'post',
                    data: {id: obj.data.id},
                    success: function (res) {
                        if (res.code != 0) {
                            layer.msg(res.msg, {icon: 5, time: 1000});
                        } else {
                            layer.msg(res.msg, {icon: 1, time: 1500});
                            insTb.reload();
                        }
                        layer.close(loading);
                    }, error: function () {
                        layer.msg('网络错误请稍后重试', {icon: 5, time: 1000});
                        layer.close(loading);
                    }
                });
                return false;
            });
        }

        /* 点击图片放大 */
        $(document).off('click.tbImg').on('click.tbImg', '[tb-img]', function () {
            var imgList = table.cache['test'].map(function (d) {
                return {
                    alt: '',
                    src: d.img_url
                }
            });
            layer.photos({photos: {data: imgList, start: $(this).data('index')}, shade: .1, closeBtn: true});
        });

        /* 追加玩法设置 */
        $(document).on('click','.add-game', function () {
            var html = '<div class="layui-form-item layui-row">\n' +
                '                <label class="layui-form-label layui-form-required">玩法设置</label>\n' +
                '                <div class="layui-inline layui-col-md1">\n' +
                '                    <input name="time[]" placeholder="请输入时间" class="layui-input"\n' +
                '                           lay-verType="tips" lay-verify="required" autocomplete="off" required/>\n' +
                '                </div>\n' +
                '                <div class="layui-inline layui-col-md1">\n' +
                '                    <input name="scale[]" placeholder="请输入盈亏比例" class="layui-input"\n' +
                '                           lay-verType="tips" lay-verify="required" autocomplete="off" required/>\n' +
                '                </div>\n' +
                '                <div class="layui-inline layui-col-md1">\n' +
                '                    <input name="game_price_low[]" placeholder="请输入价格下限" class="layui-input"\n' +
                '                           lay-verType="tips" lay-verify="required" autocomplete="off" required/>\n' +
                '                </div>\n' +
                '                <div class="layui-inline layui-col-md1">\n' +
                '                    <input name="game_price_high[]" placeholder="请输入价格上限" class="layui-input"\n' +
                '                           lay-verType="tips" lay-verify="required" autocomplete="off" required/>\n' +
                '                </div>\n' +
                '                <div class="layui-btn-group">\n' +
                '                    <button type="button" class="layui-btn layui-btn-sm layui-btn-danger del-game">\n' +
                '                        <i class="layui-icon">&#xe640;</i>\n' +
                '                    </button>\n' +
                '                </div>\n' +
                '            </div>';

            $('#game').append(html);
        })

        /* 删除玩法设置 */
        $(document).on('click','.del-game', function () {
            var currentDiv = $(this).closest('.layui-form-item');  // 查找最接近的 .layui-form-item 父元素
            currentDiv.remove();  // 删除当前的 div
        });
    });
</script>
</body>
</html>
